<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        <li>1</li>
        <li>2</li>
        
    </ul>


    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>

    <div>
        <p>我是替换前的</p>
    </div>
    
    <script>
        let ul = document.querySelector('ul')
        // 创建新的元素
        // 写法：createElement('标签名')
        let li = document.createElement('li')
        li.innerHTML = '6666666'
        console.log(li);
        // 添加元素
        // 父元素.appendChild(子元素) 将元素添加到父元素的结尾
        ul.appendChild(li)
        // insertBefore(要添加的元素，参照节点)
        ul.insertBefore(li,ul.children[1])


        // 移除节点
        let ol = document.querySelector('ol')
        // 父节点.removeChild(要删除的子节点)
        ol.removeChild(ol.firstElementChild)


        // 替换节点
        // 父节点.replaceChild(新节点,被替换的节点)
        let p = document.querySelector('p')
        let div = document.querySelector('div')

        // 创建h1
        let h1 = document.createElement('h1')
        h1.innerHTML = '替换后的h1'
        div.replaceChild(h1,p)

        // 元素的克隆
        // cloneNode(true/false) true:深度克隆会将所有内容及节点克隆下来，false浅克隆只复制标签
        console.log(div.children[0].cloneNode())
        console.log(div.children[0].cloneNode(true))

        let newh1 = div.children[0].cloneNode(true)

        document.body.appendChild(newh1)



       
        
    </script>
</body>
</html>